<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.query.arenaName }}-{{ $route.query.name }}-时段信息设置</div>
    <s-table bordered ref="table" rowKey="id" :loading="isLoading" :columns="columns" :data="loadData" :pageSize="15">
      <div slot="price" slot-scope="text, item">
        <EditablePrice :text="text" @change="onPriceChange(item.id, $event)" />
      </div>
      <div slot="status" slot-scope="text, item">
        <EditableStatus :status="text" @change="onStatusChange(item.id, $event)" />
      </div>
    </s-table>
  </a-card>
</template>

<script>
import * as Api from '@/api/arena/fragment'
import { STable } from '@/components'
import EditablePrice from './time-list/EditablePrice'
import EditableStatus from './time-list/EditableStatus'

export default {
  name: 'TimeList',
  components: {
    STable,
    EditablePrice,
    EditableStatus,
  },
  data() {
    return {
      // 正在加载
      isLoading: false,
      // 表头
      columns: [
        {
          title: '时间段',
          dataIndex: 'fragment.start',
          width: '50px',
          colSpan: 2,
          customRender: (value, row, index) => {
            const obj = {
              children: row.fragment.start + ' - ' + row.fragment.end,
              attrs: {
                colSpan: 2,
                align: 'center'
              }
            }
            return obj
          },
        },
        {
          title: '时间段',
          dataIndex: 'fragment.end',
          width: '50px',
          colSpan: 0,
          customRender: (value, row, index) => {
            const obj = {
              children: row.fragment.start + '-' + row.fragment.end,
              attrs: {
                colSpan: 0
              }
            }
            return obj
          },
        },
        {
          title: '价格',
          dataIndex: 'price',
          width: '30%',
          scopedSlots: { customRender: 'price' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '30%',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (param) => {
        return Api.partFragments({ ...param, ...this.queryParam, arenaPartId: this.$route.query.arenaPartId }).then(
          (response) => {
            console.log(response.data)
            return response.data
          }
        )
      },
    }
  },
  methods: {
    onPriceChange(id, price) {
      console.log('onPriceChange: ', id, price)
      Api.editPrice({ id, price }).then((response) => {
        console.log(response.data)
      })
    },

    // 修改状态
    onStatusChange(id, status) {
      console.log('status change: ', id, status)
      Api.editStatus({ id, status }).then((response) => {
        console.log(response.data)
      })
    },
    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },
  },
}
</script>